<template>
	<view class="bg"  :visible.sync="modalShow" width="60%" :before-close="modalClose">
		<view class="mask_bg">
			<view class="rule">等级规则</view>
			<view class="model_bg">
				<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/tabbarIcon/menjin2.png" ></image>
			</view>
			<view class="title">活动达人</view>
			<view class="list">
				<view class="list_item" style="font-weight: 500;">
					<view>任务行为</view>
					<view>次数</view>
				</view>
				<view class="list_item">
					<view>报名活动</view>
					<view>1次</view>
				</view>
				<view class="list_item">
					<view>连续签到</view>
					<view>1次</view>
				</view>
			</view>
			<view style="height: 24rpx;background: #F7F7F7;margin: 0 15%;"></view>
			<view class="model_bg">
				<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/tabbarIcon/menjin2.png" ></image>
			</view>
			<view class="title">活动达人</view>
			<view class="list">
				<view class="list_item" style="font-weight: 500;">
					<view>任务行为</view>
					<view>次数</view>
				</view>
				<view class="list_item">
					<view>报名活动</view>
					<view>1次</view>
				</view>
				<view class="list_item">
					<view>连续签到</view>
					<view>1次</view>
				</view>
			</view>
			<view class="close" @click="close()">
				<text class="btn">关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			modalShow:false,
		}
	},
	methods: {
		init(){
			this.modalShow = true
		},
		modalClose(){
			this.modalShow = false;
		},
		close() {
			this.$emit('closeMask', false)
		}
	}
}
</script>

<style lang="less" scoped>
	.bg {
		width:100%;
		height: 100%;
		position: absolute;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		.mask_bg {
			background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/task/wrapBg.png) no-repeat;
			background-size: 100% 100%;
			height: 1200rpx;
			text-align: center;
			padding-top: 36rpx;
			.rule {
				font-size: 36rpx;
				color: #66645D;
			}
			.model_bg {
				height: 160rpx;
				background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/task/bg.png) no-repeat 160rpx 0;
				background-size: 425rpx 144rpx;
				// margin-left: 22.5%;
				margin-top: 20rpx;
				image {
					width: 128rpx;
					height: 140rpx;
				}
			}
			.title {
				font-size: 32rpx;
				color: #66645D;
			}
			.list {
				// margin: 0 81rpx;
				.list_item {
					display: flex;
					justify-content: space-around;
					color: #66645D;
					font-size: 28rpx;
					height: 87rpx;
					align-items: center;
					// border-bottom: 1rpx solid #c7c7c7;
				}
			}
			.close {
				margin: 0 28rpx;
				.btn {
					width: 100%;
					display: block;
					height: 88rpx;
					line-height: 88rpx;
					background: #F7F7F7;
					border: 1px solid #F7F7F7;
					color: #66645D;
					font-size: 30rpx;
					border-radius: 0 0 12rpx 12rpx;
				}
			}
		}
	}
</style>
